<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件 </title>
</head>
<!-- 
    vue中，通过自定义事件 $emit()触发事件
    vm.$emit(myEvent,args,....)
    myEvent: 
    args: 参数列表
-->

<body>
    <div id="app">
        <parent></parent>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm = Vue.createApp({})
        vm.component('child',{
            data:function(){
                return{
                    info:{
                        name:'哈密瓜',
                        price:'9.88',
                        num:'2600公斤'
                    }
                }
            },
            methods:{
                handleClick(){
                    //调用示例$emit()
                    this.$emit("date", this.info)
                }
            },
            template:
            `<button v-on:click="handleClick">显示子组件内容</button>`
           })
           
        vm.component('parent',{
            data:function(){
                return{
                    name:'',
                    price:'',
                    num:''
                }
            },
            methods:{
                //接受子组件传递的数据
                childDate(info){
                    this.name=info.name
                    this.price=info.price
                    this.num=info.num
                }
            },
            template:
            `
            <div>
                <child v-on:date="childDate"></child>
                <ul>
                    <li>{{name}}</li>
                    <li>{{price}}</li>
                    <li>{{num}}</li>
                </ul>
            </div>
            `
        })
        vm.mount('#app')
    </script>
</body>

</html>